<template>
  <div class="addMember">
    <van-nav-bar
      title="导入文件"
      left-arrow
      @click-left="goBackHandle"
      :fixed="true"
      :border="false"
      :safe-area-inset-top="true"
      style="padding-top: 0px"
    >
    </van-nav-bar>

    <div class="dataContent">
      <div class="contentTop"></div>
      <div>
        <van-cell title="选择日期区间" :value="date" @click="show = true">
          <template #extra>
            <van-icon
              class="extra"
              name="arrow-down"
              size="18"
              v-show="date == ''"
            />
          </template>
        </van-cell>
        <van-calendar
          color="#006dff"
          v-model="show"
          type="range"
          :min-date="new Date('2022/11/01')"
          @confirm="onConfirm"
        />
      </div>
      <div class="contentTop" style="margin-top: 0"></div>
      <div class="noData" v-if="documentData.length == 0">
        <img :src="require('../../assets/noData.png')" alt="" />暂无数据
      </div>
      <div
        class="content"
        v-for="(item, index) in documentData"
        :key="index"
        @click="clickDoc(item)"
        v-else
      >
        {{ item.file.name }}
        <!-- <van-icon name="close" size="16" @click="deleteFile(item)" /> -->
      </div>
    </div>
    <div class="footer">
      <van-uploader
        accept=".xlsx"
        v-model="fileList"
        :after-read="afterRead"
        :preview-image="false"
      >
        <van-button icon="plus" type="primary">上传文件</van-button>
      </van-uploader>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import { SuccesFN } from '@/DceMessage'
import { Toast } from 'vant'
import backMixin from '@/backMixin'
export default {
  name: 'comparExcel',
  mixins: [backMixin],
  data() {
    return {
      documentData: [],
      fileList: [],
      fileIds: [],
      date: '',
      show: false
    }
  },
  mounted() {},
  methods: {
    formatDate(date) {
      let sm = date.getMonth() + 1
      sm < 10 ? (sm = '0' + sm) : sm
      let em = date.getMonth() + 1
      em < 10 ? (em = '0' + em) : em
      let sd = date.getDate()
      sd < 10 ? (sd = '0' + sd) : sd
      return `${date.getFullYear()}-${sm}-${sd}`
    },
    onConfirm(date) {
      const [start, end] = date
      this.show = false
      this.date = `${this.formatDate(start)} / ${this.formatDate(end)}`
    },
    // 点击删除图标
    deleteFile(val) {
      console.log(val)
      for (var i = 0; i < this.documentData.length; i++) {
        if (this.documentData[i] === val) {
          this.documentData.splice(i, 1)
          this.$toast.success({
            duration: 1500, // 持续展示 toast
            forbidClick: true, // 禁用背景点击
            message: '删除成功'
          })
        }
      }
    },
    //上传附件
    afterRead(file, detail) {
      if (this.date == '') {
        Toast.fail('请选择对比日期区间')
        return
      }
      this.$nextTick(() => {
        console.log('file', file)

        // 如果this.documentData有数据
        if (this.documentData.length !== 0) {
          console.log('111')
          // for循环
          console.log(this.documentData.length)
          for (var i = 0; i < this.documentData.length; i++) {
            console.log(this.documentData.length)
            // console.log(this.documentData[i])

            // if (
            //   file.file.lastModified == this.documentData[i].file.lastModified
            // ) {
            //   // 如果要上传的文件等于已有文件，上传重复
            //   this.$toast.fail({
            //     duration: 1500, // 持续展示 toast
            //     forbidClick: true, // 禁用背景点击
            //     message: '上传重复'
            //   })
            // } else {
            // 如果要上传的文件不等于已有文件，上传成功

            const formData = new FormData()

            formData.append('startDate', this.date.split('/')[0])
            formData.append('endDate', this.date.split('/')[1])
            formData.append('excelFile', file.file)

            this.$PostFormData(`/attendance-api/cal-attendance`, formData).then(
              res => {
                if (res.data.Status === 'success') {
                  this.documentData = []
                  this.documentData.push(file)
                  SuccesFN(res.data.Message)
                } else {
                  this.$toast.fail({
                    duration: 1500, // 持续展示 toast
                    forbidClick: true, // 禁用背景点击
                    message: res.data.Message
                  })
                }
              }
            )
            // }
          }
        } else {
          // 如果this.documentData没数据
          const formData = new FormData()
          formData.append('startDate', this.date.split('/')[0])
          formData.append('endDate', this.date.split('/')[1])
          formData.append('excelFile', file.file)

          this.$PostFormData(`/attendance-api/cal-attendance`, formData).then(
            res => {
              if (res.data.Status === 'success') {
                this.documentData = []
                this.documentData.push(file)
                SuccesFN(res.data.Message)
              } else {
                this.$toast.fail({
                  duration: 1500, // 持续展示 toast
                  forbidClick: true, // 禁用背景点击
                  message: res.data.Message
                })
              }
            }
          )
        }
      })
    },
    // 点击提交按钮
    submit() {
      console.log('点击提交按钮')
    },
    // 点击返回按钮
    goBackHandle() {
      this.$router.go(-1)
    },
    // 点击文件
    clickDoc(val) {
      console.log(val.doc)
    }
  }
}
</script>
<style lang="less" scoped>
.addMember:deep {
  margin: 0;
  padding: 0;
  text-align: left;
  .van-nav-bar__arrow {
    font-size: 18px;
    color: #000;
  }
  .van-nav-bar__content {
    .van-nav-bar__title {
      font-size: 18px;
    }
  }
  .dataContent {
    // background-color: #f5f5f5;
    .contentTop {
      margin-top: 56px;
    }
    .content {
      padding: 10px 16px;
      border-bottom: 1px solid #ddd;
      display: flex;
      justify-content: space-between;
    }
  }
  .noData {
    width: 343px;
    font-size: 13px;
    color: #999999;
    background: #fff;
    border-radius: 9px;
    // margin: 20px auto;
    padding-top: 50px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    img {
      width: 254px;
      height: 290px;
      display: block;
      margin: 0 auto;
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
    // margin: 10px 16px;
    background-color: #fff;
    .van-uploader__wrapper {
      width: 100%;
    }
    .van-uploader__input-wrapper {
      width: 100%;
    }
    .van-uploader {
      display: flex;
      flex: 1;
      margin: 10px 16px;
      background-color: #006dff;
      color: #fff;
      border-radius: 10px;
      border: 0;
      .van-button {
        flex: 1;
        background-color: #006dff;
        color: #fff;
        font-size: 16px;
        border-radius: 10px;
        border: 0;
        text-align: center;
        width: 100%;
      }
    }
  }
}
</style>
